<!--
- File:    订单详情.
-->
<template>
  <div>
    <div class="Web_Box">
      <div class="order_top">
        <h3 v-show="orderInfo.order_info.is_self == '0'">{{orderInfo.order_info.order_state | orderStatusTxt}}</h3>
        <h3 v-show="orderInfo.order_info.is_self == '1'">{{orderInfo.order_info.order_state | orderStatusTxt2}}</h3>
        <p class="f22" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.payed && orderInfo.order_info.is_self == '0'">卖家将尽快发货，请耐心等待</p>
        <p class="f22" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.payed && orderInfo.order_info.is_self == '1'">卖家将尽快配货，请耐心等待</p>
        <p class="f22" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.sended && orderInfo.order_info.is_self == '0'">卖家已发货，请等待快递员送货
        <p class="f22" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.sended && orderInfo.order_info.is_self == '1'">卖家已配货，请前往门店提取
        <p class="f22" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.unpay && !payTimeout">剩余<span>{{payTimeRemain.hours}}</span>小时<span>{{payTimeRemain.minutes}}</span>分<span>{{payTimeRemain.seconds}}</span>秒自动取消订单
        </p>
        <p class="f22" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.unpay && payTimeout">订单付款超时，已自动取消</p>
        <p class="f22" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.cancle">感谢您的光临</p>
        <p class="f22" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.recevied">感谢您的购买，欢迎再次光临</p>
      </div>
      <div class="ConfirmationOrder">
        <div class="ConsigneeInfo">
          <p class="text1">
            <span class="name fl">
              <span v-show="orderInfo.order_info.is_self == '0'">收货人:</span>
              <span v-show="orderInfo.order_info.is_self == '1'">自提门店:</span>
              {{orderInfo.reciver_name}}
            </span>
            <span class="tel fr">{{orderInfo.add_list.mob_phone}}</span></p>
          <div class="Address slh2">{{orderInfo.add_list.address}}</div>
        </div>
        <!--<div class="order_ts" v-show="integralGet > 0 && orderInfo.order_info.order_state != $dictionary.orderStatus.cancle">此订单确认收货后可获得{{integralGet}}积分</div>-->
        <div class="ShopGoods EditPro hidden bor_b_dcdddd">
          <div class="ProList">
            <div class="oeder_tex">订单号:{{orderInfo.order_info.order_sn}}</div>
            <ul>
              <li v-for="item in orderInfo.order_info.extend_order_goods">
                <div class="Pic"><img :src="$config.imgsite + $config.goodsImgSrc + item.store_id + '/' + item.goods_image + '_w150'" alt=""/></div>
                <div class="Con">
                  <div class="pl20">
                    <span class=" Nums">×{{item.goods_num}}</span>
                    <h2 class="">{{item.goods_name}}
                      <!--&nbsp;&nbsp;<span v-for="attr in item.goods_spec">{{attr.name}} </span>-->
                    </h2>
                    <p class="Attribute" style="font-size: 12px; margin-bottom: 0; height: auto"><span v-for="attr in item.goods_spec">{{attr.name}} </span></p>
                    <p class="PriceQuantity f-cb" v-show="item.gc_id != $dictionary.buyType.integral"><span class="fl cr_f84e37">￥{{item.goods_price}}</span>
                      <span class="refund" style="width: 3.6rem; margin-left:5px" v-show="self && item.is_return == 1 && (orderInfo.order_info.order_state == $dictionary.orderStatus.sended || orderInfo.order_info.order_state == $dictionary.orderStatus.recevied)" @click="gotoRefundGoodsList(orderInfo.order_info.order_id, item.goods_id)">退货记录</span>
                      <span class="refund" v-show="self && item.return_num != item.goods_num && (orderInfo.order_info.order_state == $dictionary.orderStatus.sended || orderInfo.order_info.order_state == $dictionary.orderStatus.recevied)" @click="addRefundGoods(orderInfo.order_info.order_id, item.goods_id)">退货</span>
                    </p>
                    <p class="PriceQuantity f-cb" v-show="item.gc_id == $dictionary.buyType.integral">
                      <i class="iconfont icon-zengpin1" style="color: #f00;"></i>
                    </p>
                  </div>
                </div>
              </li>
              <li v-show="self && orderInfo.order_info.lock_state != 1 && orderInfo.order_info.order_state == $dictionary.orderStatus.payed">
                <span class="refund" @click="addRefundMoney(orderInfo.order_info.order_id, orderInfo.order_info.extend_order_goods[0].goods_id)">退款</span>
              </li>
              <li v-show="orderInfo.order_info.lock_state == 1 && orderInfo.order_info.refund_state != 1 && orderInfo.order_info.order_state == $dictionary.orderStatus.payed">
                <span class="refund" style="border: none; width: 3.6rem;border: #dcdddd solid 1px" @click="gotoRefundMoneyList(orderInfo.order_info.order_id)">查看退款</span>
              </li>
              <!--<li v-show="orderInfo.order_info.lock_state == 1 && (orderInfo.order_info.order_state == $dictionary.orderStatus.sended || orderInfo.order_info.order_state == $dictionary.orderStatus.recevied)">-->
                <!--<span class="refund" style="border: none">退货中</span>-->
              <!--</li>-->
            </ul>
          </div>
        </div>
        <div class="order_list">
          <p class="f-cb">商品合计<span class="fr cr_f60202">￥{{orderInfo.order_info.goods_amount}}</span></p>
          <p class="f-cb">运费<span class="fr cr_f60202">￥{{orderInfo.order_info.shipping_fee || 0}}</span></p>
          <!--<p class="f-cb">余额抵扣<span class="fr">-￥{{orderInfo.order_info.balance_amount || 0}}</span></p>-->
          <p class="pt10" v-show="orderInfo.order_info.voucher_price">优惠券抵扣：<span class="fr cr_f60202">-￥{{orderInfo.order_info.voucher_price}}</span></p>
          <p class="f-cb" v-if="orderInfo.order_info.integral_amount > 0">积分抵扣：<span class="fr cr_f60202">-￥{{integralMoney | toFixed(2)}}</span></p>
          <p class="f-cb">实付款<span class="fr cr_f60202">￥{{orderInfo.order_info.pay_amount || 0}}</span></p>
          <p class="f-cb" v-if="orderInfo.order_info.order_note">买家留言：{{orderInfo.order_info.order_note}}</p>
        </div>
        <div class="order_list2">
          <ul>
            <li>创建时间:{{orderInfo.order_info.add_time | timestampToDate}}</li>
            <li v-show="orderInfo.order_info.payment_time != 0">付款时间:{{orderInfo.order_info.payment_time | timestampToDate}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div v-show="self && orderInfo.order_info.order_state == $dictionary.orderStatus.unpay && !payTimeout" class="order_btn">
      <a href="javascript:void(0)" @click="cancleOrder(orderInfo.order_info.order_id)">取消订单</a><a href="javascript:void(0)" class="pays" @click="pay">付款</a>
    </div>
    <div v-show="self && orderInfo.order_info.order_state == $dictionary.orderStatus.sended" class="order_btn">
      <a href="javascript:void(0)" @click="gotoOrderExpress(orderInfo.order_info.order_id)">查看物流</a><a href="javascript:void(0)" class="pays" @click="confirmReceived">确认收货</a>
    </div>
    <div class="order_btn" v-show="self && orderInfo.order_info.lock_state != 1 && orderInfo.order_info.order_state == $dictionary.orderStatus.recevied && orderInfo.order_info.evaluation_state == 0">
      <a href="javascript:void(0)" @click="gotoOrderExpress(orderInfo.order_info.order_id)">查看物流</a><a href="javascript:void(0)" class="pays" @click="addComment(orderInfo.order_info.order_id)">立即评价</a>
      <!--<button class="but_2 wauto" type="button" @click="addComment(orderInfo.order_info.order_id)">立即评价</button>-->
    </div>
    <div class="BottomGd" v-show="self && orderInfo.order_info.order_state == $dictionary.orderStatus.recevied && orderInfo.order_info.evaluation_state == 1">
      <button class="but_2 wauto" type="button" @click="gotoOrderExpress(orderInfo.order_info.order_id)">查看物流</button>
    </div>
    <!--右侧导航Start-->
    <back-nav :show="!(orderInfo.order_info.order_state == $dictionary.orderStatus.payed || orderInfo.order_info.order_state == $dictionary.orderStatus.cancle)"></back-nav>
    <footer-tab :show="orderInfo.order_info.order_state == $dictionary.orderStatus.payed || orderInfo.order_info.order_state == $dictionary.orderStatus.cancle"></footer-tab>
  </div>
</template>

<script>
  import payPop from '../../components/payPop'
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({couponSetting: 'couponSetting'}),
      mapRules({once: 'couponSetting'})
    ],
    data() {
      return {
        id: this.$route.params.id,
        self: this.$route.query.self != 'false', // 是否是本人的订单
        orderInfo: {add_list: {}, order_info: {extend_order_common: {}, extend_order_goods: {}}},
        autoRecevieTimeRemain: {days: 0, hours: 0, minutes: 0, seconds: 0},
        payTimeRemain: {days: 0, hours: 0, minutes: 0, seconds: 0},
        payTimeRemainInterval: null
      }
    },
    components: {},
    created() {
      this.getOrderInfo(this.id)
//      this.getAutoReceiveTimeRemain()
    },
    beforeDestroy() {
      clearInterval(this.payTimeRemainInterval)
    },
    computed: {
      // 积分抵扣的金额
      integralMoney: function() {
        return this.orderInfo.order_info.integral_amount * this.couponSetting.points_money
      },
//      integralGet: function () {
//        return parseInt((this.orderInfo.order_info.order_amount) * 0.05)
//      },
      orderTimeout: function () {
        if (this.autoRecevieTimeRemain.days < 0 || this.autoRecevieTimeRemain.hours < 0 || this.autoRecevieTimeRemain.minutes < 0 || this.autoRecevieTimeRemain.seconds < 0) {
          return true
        }
        return false
      },
      payTimeout: function () {
        if (this.payTimeRemain.days < 0 || this.payTimeRemain.hours < 0 || this.payTimeRemain.minutes < 0 || this.payTimeRemain.seconds < 0) {
          clearInterval(this.payTimeRemainInterval)
          return true
        }
        return false
      }
    },
    methods: {
      gotoRefundGoodsList(orderId, goodsId) {
        this.$router.push({name: 'refund-goods-list', params: {orderId: orderId, goodsId: goodsId}})
      },
      gotoRefundMoneyList(id) {
        this.$router.push({name: 'refund-list', query: {type: 1}})
      },
      gotoRefundGoodsDetail(id) {
        this.$router.push({name: 'refund-goods-detail', params: {id: id}})
      },
      addRefundGoods(orderId, goodsId) {
        this.$router.push({name: 'refund-goods-add', params: {orderId: orderId, goodsId: goodsId}})
      },
      addRefundMoney(orderId, goodsId) {
        this.$router.push({name: 'refund-money-add', params: {orderId: orderId, goodsId: goodsId}})
      },
      gotoOrderExpress(id) {
        this.$router.push({name: 'order-express', params: {id: id}})
      },
      addComment(id) {
        this.$router.push({name: 'comment-add', params: {id: id}})
      },
      getOrderInfo(id) {
        this.$request.getOrderInfo(id).then(data => {
//          data.order_info.order_state = this.$dictionary.orderStatus.sended
//          data.order_info.shipping_time = 1499908975 // 1500085375
          this.orderInfo = data
//          if (data.order_info.order_state == this.$dictionary.orderStatus.sended) { // 已发货，计算剩余自动收货时间
//            this.getAutoReceiveTimeRemain(data.shipping_time)
//          }
          if (data.order_info.order_state == this.$dictionary.orderStatus.unpay) { // 已发货，计算剩余自动取消订单
            this.getPayTimeRemain(data.order_info.add_time)
            clearInterval(this.payTimeRemainInterval)
            this.payTimeRemainInterval = setInterval(() => {
              this.getPayTimeRemain(data.order_info.add_time)
            }, 1000)
          }
        }).catch(e => {
          this.$toast('获取订单明细失败:' + e.msg)
        })
      },
      getAutoReceiveTimeRemain(shippingTimeTamp) {
        if (shippingTimeTamp) {
          let currentTime = new Date()
          let shippingStartTime = new Date()
          shippingStartTime.setTime(shippingTimeTamp * 1000)
          let shippingEndTime = new Date(shippingStartTime)
          shippingEndTime.setDate(shippingStartTime.getDate() + 7)
          this.autoRecevieTimeRemain = this.$utils.timeDif(currentTime, shippingEndTime)
        }
      },
      getPayTimeRemain(orderTimeTamp) {
        if (orderTimeTamp) {
          let currentTime = new Date()
          let orderTime = new Date()
          orderTime.setTime(orderTimeTamp * 1000)
          let payEndTime = new Date(orderTime.getTime() + 1000 * 60 * 30)
          this.payTimeRemain = this.$utils.timeDif(currentTime, payEndTime)
        }
      },
      cancleOrder(id) {
        this.$messageBox.confirm(`你确定要取消订单吗?`).then(action => {
          this.$request.cancleOrder(id).then(data => {
            this.$toast('取消订单成功')
            this.$router.go(-1)
          }).catch(e => {
            this.$toast('取消订单失败:' + e.msg)
          })
        }).catch(() => {
        })
      },
      confirmReceived() {
        this.$request.confirmReceived(this.id).then(data => {
          this.$toast('确认收货成功')
          this.$router.go(-1)
        }).catch(e => {
          this.$toast('确认收货失败:' + e.msg)
        })
      },
      pay() {
        let paySn = this.orderInfo.order_info.pay_sn
        payPop({paySn: paySn, orderId: this.orderInfo.order_info.order_id})
      }
    }
  }
</script>

<style>

</style>